<template>
  <div :class="prefixCls">
    <ul>
      <li
        v-for="(icon, key) in icons"
        :key="key"
        :class="{ active: selectedIcon == icon }"
        @click="handleSelectedIcon(icon)"
      >
        <span :class="['ant-iconfont', 'icon-' + icon]" style="font-size: 36px"></span>
      </li>
    </ul>
  </div>
</template>

<script>
import Axios from 'axios'
import icons from './icons'

export default {
  name: 'IconSelect',
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-icon-selector',
    },
    // 
    value: {
      type: String,
    },
  },
  data() {
    return {
      selectedIcon: this.value || '',
      currentTab: 'directional',
      icons,
    }
  },
  watch: {
    value(val) {
      this.selectedIcon = val
      this.autoSwitchTab()
    },
  },
  created() {
    const iconCssDom = document.querySelector('#antIconfont')
    Axios.get('//at.alicdn.com/t/c/font_3849265_uebas6kvm0g.css').then((r) => {
      console.log(r.data)
    })
    // axios.get(iconCssDom.href).then((r) => {
    //   console.log(r)
    // })
    this.value && this.autoSwitchTab()
  },
  methods: {
    handleSelectedIcon(icon) {
      this.selectedIcon = icon
      this.$emit('change', icon)
    },
    handleTabChange(activeKey) {
      this.currentTab = activeKey
    },
    autoSwitchTab() {
      icons.some((item) => item.icons.some((icon) => icon === this.value) && (this.currentTab = item.key))
    },
  },
}
</script>

<style lang="less" scoped>
@import '../index.less';

ul {
  list-style: none;
  padding: 0;
  overflow-y: scroll;
  height: 400px;

  li {
    display: inline-block;
    padding: @padding-sm;
    margin: 3px 0;
    border-radius: @border-radius-base;

    &:hover,
    &.active {
      // box-shadow: 0px 0px 5px 2px @primary-color;
      cursor: pointer;
      color: @white;
      background-color: @primary-color;
    }
  }
}
</style>
